<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/jquery-min-3.4.1.js"></script>
</head>
<body>
<div>
    <textarea name="" id="1" cols="30" rows="10" class="t1"></textarea>
    <textarea name="" id="2" cols="30" rows="10" class="t2"></textarea>
    <button disabled>发送</button>
</div>
<script>
    /* 实现监听textarea或input内容变化，动态切换按钮是否可用 */
    $(function () {
        $("button").click(function () {
            alert("send");
        });
        /**
         * 使用change事件可以实时的监听textarea内容的变化，但必须在元素失去焦点时事件才发生
         */
        // $("textarea").change(function () {
        //     console.log($(this).val());
        // });

        /**
         * 使用事件委托，实现监听textarea或input内容的实时输入
         */
        var content = "";
        var times = 0;//键盘抬起10次自动保存一次
        $("body").delegate("textarea", "propertychange, input", function (e) {
            console.log("delegate", $(this).val(), e.target);
            content = $(this).val();
            // 让按钮可用
            if ($(this).val().length > 0) {
                $("button").prop("disabled", false);
            } else {
                $("button").prop("disabled", true);
            }

        });
        $(".t1").on("keyup", function () {
            if (times >= 10) {
                console.log("自动保存", content);
                times = 0;
            }
        });

    })
</script>
</body>
</html>